import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    WhiteSpace,
    ActionSheet,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import Moment from 'moment';
import { getFullUrl, gotoLoginAndBack, isWechat, publicWXAppID, SERVER_DOMAIN, gotoLogin,getPath } from '../../utils/common';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import MyListView from '../../components/MyListView/MyListView';
import MyListViewLz from '../../components/MyListViewLz/MyListViewLz';
import NavBottomBar from '../../components/NavBottomBar/NavBottomBar';
import {routerRedux} from "dva/router";
import {checkbox} from './findPeople.less';
import {findIndex, fenlei, nologin, noguanzhu} from './findIndex.less';
import  renwu from'../../assets/svg/renwu.svg';
import  caidan from'../../assets/svg/caidan.svg';
import  text from'../../assets/svg/text.svg';
import  graphTheory from'../../assets/svg/graph-theory.svg';
import  shot from'../../assets/svg/shot.svg';
import  article from'../../assets/svg/article.svg';
import dianzan from '../../assets/svg/dianzan.svg';
import dianzan1 from '../../assets/svg/dianzan1.svg';
import pinglun from '../../assets/svg/pinglun.svg';
import share from '../../assets/svg/share.svg';
import sanjiaoup from "../../assets/svg/sanjiaoup.svg";
import sanjiaod from "../../assets/svg/sanjiaod.svg";
import {Checkbox} from "antd-mobile/lib/index";
import {evalute_madel} from "../evaluate/EvaluateListItem.less";
import ConnerListItem from './connerListItem';
import HotsListItem from './hotsListItem';
import {getIsFalse, isToken} from '../../utils/judgmentEquipment';
const Item = Popover.Item;
const CheckboxItem = Checkbox.CheckboxItem;



class FindIndex extends Component {
    constructor(props){
        super(props);
        this.state={
            visible: false,
            num:0,
            page:0,
            hotType:"",
            modal:false,
            Token:isToken()
        };
        this.page=0;
        this.hotType="";
        this.AlloyTouch = null;
        this.tabs=[{title:"全部",id:"abc"}];
    }
    dataList = [
        { url: `${text.id}`, title: '文字' },
        { url: `${graphTheory.id}`, title: '图说' },
        { url: `${shot.id}`, title: '视频' },
        { url: `${article.id}`, title: '文章' },
    ].map(obj => ({
        icon: <Icon type={obj.url} style={{width:"100%",height:"100%"}}></Icon>,
        title: obj.title,
    }));
    onClick=(e)=>{
        e.target.parentNode.parentNode.parentNode.nextSibling.style.display = "";

    }
    // change=(e)=>{
    //     this.setState({
    //         editStatus:!e
    //     });
    // }
    showShareActionSheet = () => {
        ActionSheet.showShareActionSheetWithOptions({
                options: this.dataList,
                maskClosable: true,
                cancelButtonText:<Icon type="cross" style={{color:"#999",marginTop:".3rem"}}></Icon>,
            },
            (buttonIndex) => {
            console.log(buttonIndex)
            if(!this.state.Token){
                Modal.alert("", <div style={{ lineHeight: '0.9rem', fontSize: "0.3rem",padding:".5rem",color:"#333" }}>请先登录!</div>, [ {
                    text: '取消',
                    onPress: () => {
                        localStorage.removeItem('token');
                        sessionStorage.removeItem('token');
                        getIsFalse();
                        // window.location.href="/";
                        // window.history.back();
                    },
                },{
                    text: '去登录',
                    onPress: () => {
                        gotoLoginAndBack();
                        // window.location.href = "/login";
                        localStorage.removeItem('token');
                        sessionStorage.removeItem('token');
                        getIsFalse();
                    },
                }]);
            }else{
                if(buttonIndex>-1){
                    if(buttonIndex==3){
                        this.props.dispatch({ type: 'findOthers/checkAuthEFF'}).then(result=>{
                            if(result.code==400){
                                return Modal.alert('',<div style={{  fontSize: "0.3rem",padding:".5rem",color:"#333" }}> 用户未认证,请认证后在进行文章发表</div>, [
                                    { text: '取消', onPress: () => console.log('cancel') },
                                    {
                                        text: '前往认证',
                                        onPress: () =>  this.props.dispatch(routerRedux.push({
                                            pathname:`/personHome/${-1}/${1}`
                                        }))
                                    },
                                ])
                            }else{
                                this.props.dispatch(routerRedux.push({
                                    pathname:`/publish/${buttonIndex}`
                                }))
                            }
                        });
                    }else{
                        this.props.dispatch(routerRedux.push({
                            pathname:`/publish/${buttonIndex}`
                        }))
                    }
                }



            }
            });
    }
    componentDidMount(){
        if(this.props.match.params.data==1){this.refresh();}else{
            this.props.dispatch({ type: 'findOthers/getStylesEFF', obj:{ pageNo:1 }}).then(result=>{
                result.ret.list.map((item,i)=>{
                    this.tabs.push({title:item.name,id:item.id,})
                });
            });
            this.Refresh();
        }
    }
    componentWillMount(){
        console.log(isToken())
        if(isToken()){
            this.props.dispatch({type:"findOthers/fastFindEFF"}).then(result=>{
                if(result.code==200){
                    if(result.ret.isFastFind==0){
                        this.props.dispatch(routerRedux.push({
                            pathname:`/findOthers`
                        }))
                    }
                }else if(result.code==401){
                    this.setState({
                        Token:false
                    })
                }
            })
        }
    }
    refresh = () => {
         return this.props.dispatch({ type: 'findOthers/connerListEFF',obj:{pageNo:1} }).then(result=>{
             if(result.code==401){
                 this.setState({
                     Token:false
                 })
             } else{
                 this.setState({
                     Token:true
                 })
             }
         });
    }

    loadMore = () => {
        return this.props.dispatch({ type: 'findOthers/connerListEFF', obj:{pageNo:this.props.findOthers.pageNo+1} });
    }
    Refresh = () => {
        console.log(this.page,this.hotType)
        return this.props.dispatch({ type: 'findOthers/hotsListEFF',obj:{hotType:this.page>0?this.hotType:"",pageNo:1} });
    }
    LoadMore = () => {
        return this.props.dispatch({ type: 'findOthers/hotsListEFF', obj:{hotType:this.page>0?this.hotType:"",pageNo:this.props.findOthers.pageNo+1} });
    }
    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };
    showModal = (e) => {
        e.preventDefault();
        this.setState({
            modal: true,
        });
    };
    onClose = () => {
        this.setState({
            modal: false,
        });
    };

    renderContent = tab =>{
        const {dispatch} = this.props;
        const {list=[]}=this.props.findOthers;
        console.log(list)
        if(list&&list.length>0){
        return <MyListViewLz
            kid={tab.id}
            bo={true}
            style={{marginBottom:"1rem",height:"100%"}}
            getAlloyTouch={ this.getAlloyTouch }
            refresh={ this.Refresh }
            loadMore={ this.LoadMore }
            hasMore={ this.props.findOthers.pageNo * this.props.findOthers.pageSize < this.props.findOthers.totalRows  }
            // itemWrapperClass={ goods_list }
            // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
            renderItem={(v,i,a)=>{
                return <HotsListItem dispatch={dispatch} nowTime={this.props.findOthers.nowTime}  v={v} key={i}  Refresh={ this.Refresh }></HotsListItem>
            }}
            data={ list }>
        </MyListViewLz>}else{
            return <div className={noguanzhu}>
                <div className="guanzhuLogo"></div>
                <div >没有热门内容!</div>
            </div>
        }

    }
    render() {
        const {dispatch} = this.props;
        const {shopTrendsEntities=[],trendsConnerImgEntities=[],styles=[],list}=this.props.findOthers;
        let { Visible, num ,isShow,Token} = this.state;
       console.log(isToken(),Token)
        return ( <Flex direction="column" className={findIndex} style={{height:"100%"}}>
                <NavBar
                    style={{width:'100%',color:'#000'}}
                    mode="light"
                    icon={<Icon type="search" style={{width:'.4rem',height:'.4rem'}}/>}
                    onLeftClick={() => this.props.dispatch(routerRedux.push({
                        pathname:`/findSearch`
                    }))}
                    rightContent={[
                        <Icon key="0" type={caidan.id} style={this.props.match.params.data==1?{display:"none"}:{width:'.4rem',height:'.4rem',marginRight:".2rem"}} onClick={this.showModal} />,
                        <Icon key="1" type={renwu.id} style={{width:'.4rem',height:'.4rem'}} onClick={()=>{
                            this.props.dispatch(routerRedux.push({
                                pathname:`/personHome/${-1}/${0}`
                            }))
                        }} />
                    ]}
                >
                    <span style={this.props.match.params.data==1?{borderBottom:"5px solid #ff0036",marginRight:".5rem",lineHeight:'.8rem'}:{marginRight:".5rem",lineHeight:'.8rem'}} onClick={(e)=>{
                        this.props.dispatch(routerRedux.replace(`/findIndex/${1}`));this.refresh();
                        this.tabs.splice(1,this.tabs.length-1)
                    }} >关注</span>
                    <span style={this.props.match.params.data==1?{lineHeight:'.8rem'}:{borderBottom:"5px solid #ff0036",lineHeight:'.8rem'}} onClick={(e)=>{
                        this.props.dispatch(routerRedux.replace(`/findIndex/${2}`));
                        this.props.dispatch({ type: 'findOthers/getStylesEFF', obj:{ pageNo:1 }}).then(result=>{
                            result.ret.list.map((item)=>{
                                this.tabs.push({title:item.name,id:item.id,})
                            });
                        });
                        this.Refresh();
                    }} >热门</span>
                </NavBar>
                {this.props.match.params.data==1&&Token? <div style={{width:"100%",background:"#fff",padding:".2rem 0",marginTop:".2rem"}}>
                    <WingBlank>
                        <Flex justify="between" onClick={()=>{
                            this.props.dispatch(routerRedux.push({
                                pathname:`/findFollow`
                            }))
                        }}>
                            <div>我的关注</div>
                            <Flex>
                                { trendsConnerImgEntities&&trendsConnerImgEntities.slice(0,4).map((v,i)=>{
                                    return <NoLazyImg src={v.headImage!=undefined?v.headImage:""} key={i} style={{borderRadius:"100%",width:".5rem",height:".5rem",marginRight:".2rem"}}></NoLazyImg>
                                })}
                                <Icon type="right"></Icon>
                            </Flex>
                        </Flex>
                    </WingBlank>
                </div>:""}
                {this.props.match.params.data==1&&Token? shopTrendsEntities&&shopTrendsEntities.length>0? <MyListView
                    style={{marginBottom:"1rem"}}
                    getAlloyTouch={ this.getAlloyTouch }
                    refresh={ this.refresh }
                    loadMore={ this.loadMore }
                    hasMore={ this.props.findOthers.pageNo * this.props.findOthers.pageSize < this.props.findOthers.totalRows  }
                    // itemWrapperClass={ goods_list }
                    // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                    renderItem={(v,i,a)=>{
                        return <ConnerListItem dispatch={dispatch} nowTime={this.props.findOthers.nowTime}  v={v} key={i}  refresh={ this.refresh }></ConnerListItem>
                    }}
                    data={ shopTrendsEntities }>
                </MyListView>:<div className={noguanzhu}>
                    <div className="guanzhuLogo"></div>
                    <div >您还没有关注好友</div>
                    <div style={{color:"#999",marginTop:".3rem"}}>关注后可实时查看对方的最新动态</div>
                </div>:""}
                {this.props.match.params.data==1&&!Token?
                    <div className={nologin}>
                        <div className="loginlogo"></div>
                        <div>你还未登录,登录后可查看关注状态</div>
                        <div className="gologin" onClick={()=>{
                            gotoLoginAndBack();
                            localStorage.removeItem('token');
                            sessionStorage.removeItem('token');
                        }}>立即登录</div>
                    </div>
                    :""}
                {this.props.match.params.data==2&&this.tabs.length>1? <Tabs tabs={this.tabs} initialPage={0} page={this.page}  onChange={(tab, index) => {
                    let hotType = tab.title;
                    this.page=index;
                    if(index==0) this.hotType="";
                    else  this.hotType=hotType;
                    this.Refresh();

                    console.log(hotType,index)
                }} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={6} />}>
                    {this.renderContent}
                </Tabs>:""}
                <Modal
                    popup
                    visible={this.state.modal}
                    onClose={this.onClose}
                    animationType="slide-down"
                    className={fenlei}
                >
                    <WingBlank>
                        <div style={{color:"#666",margin:".2rem 0",fontSize:".3rem",textAlign:"left"}}>热门分类</div>
                        <Flex  wrap="wrap" style={{width:"100%",padding:".3rem 0",backgroundColor:"#f3f3f3"}}>
                            {this.tabs.map((item,i)=>{
                                return <div key={i} style={i==this.page?{color:"#ff0036",width:"25%",textAlign:"center"}:{width:"25%",textAlign:"center"}}>
                                    <div style={{display:"inline-block",textAlign:"center",backgroundColor:"#E5E3E2",marginBottom:".3rem",padding:".05rem .1rem",width:"80%"}}
                                         onClick={(e)=>{
                                             this.page = i;
                                             if(i==0) this.hotType="";
                                             else  this.hotType=item.title;
                                             this.Refresh();
                                             this.onClose();
                                         }}>{item.title}</div>
                                </div>
                            })}
                        </Flex>
                    </WingBlank>

                </Modal>
                <NavBottomBar showShareActionSheet={this.showShareActionSheet} path={ location.pathname }></NavBottomBar>

            </Flex>

        )


    }
}

export default connect(({ findOthers }) => ({ findOthers}))(FindIndex);
